<template lang="pug">
  .withdraw-records
    .header
      .item
        | 余额:
        font.balance
          | ￥{{user_info.balance}}
      .item
        | 已提:
        font.withdraw-amount
          | ￥{{user_info.withdraw}}
    ul.rocords
      li(v-for="record in records")
        .left
          .state {{record.state}}
          .tips {{record.created_at}}
        .amount {{record.number}}元
</template>

<script>
import UserInfo from './helpers/user_info'

export default {
  name: 'WithdrawRecords',
  data () {
    return {
      records: []
    }
  },
  methods: {
    getRecords () {
      this.$http.get('/proxy/api/withdraws', {params: {access_token: this.user_info.access_token}}).then((res) => {
        this.records = res.data
      }, (err) => {
        console.log(err)
      })
    }
  },
  computed: {
    user_info () {
      return UserInfo.get()
    }
  },
  created () {
    this.getRecords()
  }
}
</script>
<style lang="sass">
@import './styles/color.sass';
.withdraw-records
  position: absolute
  top: 0
  left: 0
  width: 100%
  min-height: 100%
  background: $gray-bg
  .header
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    .item
      flex: 1 1
      padding: 15px 20px
      text-align: center
      font-size: .9em
      .balance
        color: $red
        font-size: 1.2em
      .withdraw-amount
        font-size: 1.2em
        color: $light-yellow
  ul.rocords
    background: $white
    padding: 0px
    margin: 0px
    li
      display: flex
      flex-direction: row
      justify-content: space-between
      align-items: center
      padding: 10px
      border-bottom: $gray-border 1px solid
      .left
        display: flex
        flex-direction: column
        justify-content: space-between
        align-items: flex-start
        min-height: 40px
        .state
          font-size: .9em
          font-weight: bold
          line-height: 1.2em
        .tips
          line-height: 1em
          font-size: .7em
          color: $gray
      .amount
        color: $red
</style>
